iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 12
0
自我挑戰組

WordPress 客製化從 0 開始系列 第 12

Day 12 了解 WordPress 的 CSS 編碼標準及 SCSS/Sass

  • 分享至 

  • xImage
  •  

大家好,我是 Eric。

我們今天來到了 CSS 篇章的最後一部份,關於 CSS 的編碼標準及 SCSS/Sass。如同我們在 HTML 的編碼標準裡提到的,這些標準主要目的是在統一編碼的風格。但是對於加入開源專案有興趣的任何人,我還是建議閱讀不同社群中所提供的編碼標準,因為讓自己的程式碼符合開發手冊,可以說是程式碼品質的最低底線。

CSS 編碼標準

根據 WordPress 的開發人員手冊,我們可以大略整理出下列編碼標準:

格式標準

這些標準主要是統一撰寫風格,不同的開發社群對可能會有不同的規範。

  • 用 tab 縮排,不要使用半形空格縮排。
  • 同一區段 (section,並非 HTML 中的 <section>) 的不同選擇器間,須空一行;不同區段則空兩行。
  • 每個選擇器與樣式屬性都必須自成一行。
/** 正確作法 */
#selector-1,
#selector-2,
#selector-3 {
    background: #fff;
    color: #000;
}

/** 錯誤作法 */
#selector-1, #selector-2, #selector-3 {
    background: #fff; color: #000;
}

除了上述的架構上的標準外,對屬性值也有下列的要求:

  • 屬性值之前要有空格。如 display: block;
  • 括號 () 與內容間不要有空格。如 rgba(255, 255, 0, 0);
  • 每行屬性最後都要有分號 ;
  • 字重 (font-weight) 必須用數字定義,譬如使用 700 而非 Bold。
  • 0 不接任何單位,除了 transition 使用的 0s 秒數之外。

選擇器命名標準

雖然命名方式不符合下列標準,瀏覽器一樣可以正確轉譯樣式,但編碼標準的目的在於讓「其他人」可以更快進入狀況,因此透過這些標準,可以將選擇器與 JavaScript 的變數,以及 PHP 的變數命名做區隔。

  • 全部小寫,如果是多個字的話,使用連字號 (-) 連結,而非底線 (_)。錯誤範例如: .thisElement.this_element
  • 可讀性,避免使用 cx-2r 這種類型,而應該用 context-2-rows
  • 以屬性 (attributes) 作為選擇器時,要加上雙引號 (")。如 [type="text"],而非 [type=text]
  • 避免無謂的使用多重選擇器。譬如 .container 會比 div.container 更好。

最佳作法

這些最佳作法的目的,在於盡可能不要讓 CSS 檔案過度臃腫。隨著 WordPress 版本不斷更新,不論是 CSS 或是 JavaScript 這些靜態資源,或是資料庫,都無可避免地會逐漸龐大。因此開發手冊的最佳作法,便提供避免這種情況發生的方法。

  • 在處理異常時,比起新增新的代碼,先試著移除舊的代碼。例如遇到定位 postion 出問題時,比起在子層級元素新增一個 position 屬性,可以試著刪除掉上層元素的 position 屬性。
  • 避免使用意義模糊不清的魔術數字 (magic number) 進行一次性修改,例如定義 .fix-this {margin-bottom: 32px;} 這種只有一次性的選擇器。
  • 由於 DOM 的結構可能會改變,因此在指定選擇器時,最好將選擇器作為最後的目標,而不是選擇上層屬性來當做參考值。舉例來說,比起 .highlight a 這種選擇方式,將 .highlight 這個類型直接定義在 <a class="highlihght"> 會更好。
  • 掌握使用 height 屬性的時機:一般來說,用 line-height 會讓排版較有彈性,而 height 這個樣式屬性則適合在包含其他元素時使用 (例如嵌入圖片時,定義圖片區塊高度)。這裡使用這個例子來顯示 height 可能造成的結果。
  • 不要重新定義預設值,譬如你不需要再重新定義一次區塊層級元素 (block-levels) 的 display: block;

註解

相較於 JavaScript 與 PHP。WordPress 開發手冊對 CSS 註解的規範較少,這是因為 CSS 和 HTML 一樣,並不是程式語言,不會出現需要解釋函式功能跟參數的情況。但手冊中建議對於使用 !important 這個屬性值的地方,務必要補上註解。

SCSS/Sass 簡介

在 CSS 篇章中,我們所討論到的各種屬性、選擇器的內容,都可以直接套用在我們的 style.css 樣式表當中。但如同前面所說的,隨著網站不斷更新,許多新功能加入的情況下,樣式表無可避免地會變龐大。

這時候「模組化」便相當重要。

透過 SCSS 或 Sass,我們可以將 style.css 這份檔案分割成十幾個、甚至幾十個檔案,最後再透過編譯出完整的 style.css 檔案。網路上有許多比較 SCSS 與 Sass 的文章,但因為這並非本次的重點,所以就不贅述。以下的範例都會以我自己使用的 SCSS 為例。

環境建置

有關 SCSS/Sass 的安裝方式,可以參考 Sass 的安裝說明,也可以參考這篇文章,其建置的環境適用於 Visual Studio Code

特色一:變數 (variables)

儘管目前主流的瀏覽器,都已經支援 CSS 的變數函式 var(),但是用法上稍嫌複雜 (詳細用法可以參考這篇文章),而且管理上較不方便,因此這邊還是把變數當作 SCSS/Sass 的特色。

/* $變數名稱: 變數值; */
$font-color: #333;

h1,
h2,
h3,
h4,
h5,
h6,
p {
    color: $font-color;
}

經過編譯後,會變成:

h1,
h2,
h3,
h4,
h5,
h6,
p {
    color: #333;
}

特色二:函式與 mixin

在 SCSS 與 Sass 的世界中,可以透過函式的方法,大量建立重複的樣式。以 CSS 框架 Bootstrap 為例,其用來製作欄/列樣式的類型 .col-{n},便可以透過 @for 函式的方法建立:

@for $n from 1 through 12 {
    .col-#{$n} {
        width: calc( (#{$n} / 12) * 100% );
    }
}

上面的語法會編譯成下列的 CSS 語法:

.col-1 {
  width: calc( (1/12) * 100% );
}

.col-2 {
  width: calc( (2/12) * 100% );
}

/* 中間省略 */

.col-12 {
  width: calc( (12/12) * 100% );
}

或者是計算文字大小 (font-size) 時,可以透過定義 @mixin 的方式來完成:

@mixin font-size($sizeValue: 1) {
	font-size: ($sizeValue * 16) * 1px;
	font-size: $sizeValue * 1rem;
}

h2 {
    @include font-size(2.5);
}

編譯後會得到:

h2 {
    font-size: 40px;
    font-size: 2.5rem;
}

特色三:巢狀結構 (nesting)

透過巢狀結構,我們可以讓樣式更好管理。

.container {
    color: #333;
    a {
        color: #ee6688;
        &:hover {
            color: #ff7799;
        }
    }
}

編譯後會變成:

.container {
    color: #333;
}
.container a {
    color: #ee6688;
}
.container a:hover {
    color: #ff7799;
}

實務操作

由於我們公司的網站使用的是名為 _s (發音為 Underscore S) 的初始佈景,在勾選 [_sassify!] 這項進階設定後,會取得包含 scss 檔的佈景主題,供開發使用。它的基本架構如下:

sass/
|- elements/
|- forms/
|- layout/
|- media/
|- mixins/
|- modules/
|- navigation/
|- site/
|--- primary/
|--- secondary/
|- typography/
|- variables-site/
|- style.scss

從這裡我們可以看到 _s 預設的樣式架構。我們在取得這個初始佈景後,便可以根據自己想要優先編輯的模組著手進行。一般而言,我會先到 variable-site 這個路徑底下,將顏色 (_colors.scss) 與字型 (_typography.scss) 重新定義,接著再開始進行其他頁面的樣式客製化。

結語

雖然說 CSS 這個主題本身可以成為一次鐵人賽的系列文,但這次的主題主要是透過 WordPress 來了解當代網站開發的基本概念,所以我們針對 CSS 的部分將點到為止。今天與大家分享 WordPress 的編碼標準,以及簡單介紹 SCSS/Sass 作為 CSS 篇章的收尾,希望想要針對樣式客製化的人搜尋進階知識時,能夠找到進一步延伸閱讀的文件。

其實讀到這裡,你已經有能力可以獨自分析整份 Twenty Twenty 的 style.css 樣式表了。但比起直接閱讀樣式表,我建議可以前往 Twenty Twenty 的範例頁面,使用瀏覽器的開發人員工具 (Chrome F12/Cmd+Option+I; Safari Cmd+Option+I) 了解不同樣式是如何應用在網站開發中。

接下來我們要開始進入程式語言的範疇:JavaScript 的世界。

延伸閱讀


上一篇
Day 11 用 WordPress 看 CSS 樣式:「這裡空間大一點」
下一篇
Day 13 從 WordPress 了解 JavaScript 的變數與函式
系列文
WordPress 客製化從 0 開始30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言